<template>
  <div class="wrapper">
    <header>
      <p>修改信息</p>
    </header>
    <div class="contents">
      <el-form ref="form" :model="form" label-width="20vw">

        <el-form-item label="用户名称">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>

        <el-form-item label="用户账号">
          <el-input v-model="user.userId" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="即时配送">
          <el-switch v-model="isNeed"></el-switch>
        </el-form-item>

        <el-form-item label="用户性别">
          <el-radio-group v-model="user.userSex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="简介">
          <el-input type="textarea"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!--底部菜单部分--> 
    <Footer></Footer>
  
</div>
</template>

<script>
import Footer from "../components/Footer.vue"
export default {
    name: 'EditUser',
    data() {
      return {
        user: {},
        form:{},
        isNeed:true
      }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        // console.log(this.deliveryAddress)
    },
    methods: {
      onSave() {
        // console.log('submit!');
        //修改信息
        this.$axios.post('UserController/updateUserInfo',this.$qs.stringify({
          userId:this.user.userId,
          userName:this.user.userName,
          userSex:this.user.userSex
        })).then(response=>{
          let ret = response.data;
          if(ret==0){
            alert("修改信息失败！");
          }else{
            this.$setSessionStorage('user',this.user);
            this.$router.push({path:'/userMessage' });
          }
        }).catch(error=>{
          console.error(error);
      });
      },
      cancelEdit() {
        this.$router.go(-1);
      }
    },
    components: {
        Footer
    }
}
</script>

<style>
.wrapper {
  width: 100%;
  height: 100%;
}

/* header */
.wrapper header {
  width: 100%;
  height: 12vw;
  background: #0097FF;
  color: #FFF;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.wrapper .contents {
  width: 80%;
  height: 100vw;
  position: absolute;
  left: 6vw;
  top: 20vw;
}
</style>